<template>
  <div>
    <div style="margin: 30px 30px 0 30px">
       <div style="
        height: 120px;margin-top: 10px;border-radius: 10px;
        background-image: url('https://yulonghuyu.oss-cn-hangzhou.aliyuncs.com/app-web/xitong/%E5%9B%BE%E5%B1%82%201601%402x.png');
          background-size: 100% 100%;
          padding: 0 39px;
          display: flex;
          justify-content: space-between;
          align-items: center;">
          <div style="display: flex;flex-wrap: wrap;align-items: center;flex: 0 0 50%">
            <span style="font-size: 14px;font-family: Source Han Sans CN;font-weight: 500;color: #666666;">今日注册数</span>
            <span style="font-size: 28px;color: #000000;font-family: Source Han Sans CN;font-weight: 700;margin-left: 8%">{{number.todayNumber}}</span>
            <span style="height: 66px;border: 1px solid #E5E5E5;margin-left: 16%"></span>
            <span style="font-size: 14px;font-family: Source Han Sans CN;font-weight: 500;color: #666666;margin-left: 16%">昨日注册数</span>
            <span style="font-size: 28px;color: #000000;font-family: Source Han Sans CN;font-weight: 700;margin-left: 8%">{{number.yesterdayNumber}}</span>
          </div>
          <div style="flex: 0 0 50%;display: flex;justify-content: flex-end">
            <el-button icon="el-icon-refresh-left" type="primary" @click="onSubmit">刷新</el-button>
          </div>
       </div>
    </div>
    <basic-container >
      <vue-element-loading :active="isActive" spinner="bar-fade-scale" color="#409eff" background-color="rgba(255,255,255,0.2)"/>
      <el-form :inline="true">
        <div style="margin-top: 22px">
          <el-form-item>
            <el-select v-model="formInline.typeId" clearable placeholder="平台名称">
              <el-option
                v-for="item in gameType"
                :key="item.id"
                :label="item.typeName"
                :value="item.id"/>

            </el-select>
          </el-form-item>
          <el-form-item>
            <el-select v-model="formInline.userPid" filterable clearable @change="selectLead" placeholder="组长">
              <el-option
                v-for="item in lead"
                :key="item.id"
                :label="item.account"
                :value="item.id"/>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select v-model="formInline.promoterId" filterable clearable placeholder="推广员">
              <el-option
                v-for="item in promoter"
                :key="item.id"
                :label="item.account"
                :value="item.id"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="formInline.nowuser">本账号推广</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-input placeholder="玩家账号或绑定手机号" v-model="formInline.account" clearable></el-input>
          </el-form-item>

          <el-form-item>
            <el-date-picker
              clearable
              v-model="time"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
            <el-button icon="el-icon-download" type="primary" @click="handleExport">下载</el-button>
          </el-form-item>
<!--          <el-form-item>-->
<!--            <span style="color: #ff4d51">今日注册数：{{number.todayNumber}}</span>-->
<!--          </el-form-item>-->
<!--          <el-form-item>-->
<!--            <span style="color: #00a680">昨日注册数：{{number.yesterdayNumber}}</span>-->
<!--          </el-form-item>-->
        </div>
      </el-form>
    <el-row>
      <el-col :span="24">
        <template>
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="account"
              label="玩家账号">
              <template slot-scope="scope">
                <span v-if="scope.row.phone!='' && scope.row.registerWay == 1"><span
                  class="skucost-pruice">{{ scope.row.phone}}</span></span>
                <span v-else><span
                  class="skucost-pruice">{{ scope.row.account}}</span></span>
              </template>
            </el-table-column>
            <!--<el-table-column
              prop="phone"
              width="150"
              label="绑定手机号码">
            </el-table-column>-->
            <el-table-column
              prop="device"
              label="设备型号">
            </el-table-column>
            <el-table-column
              prop="registerImei"
              width="300"
              label="设备IMIE/IDFA">
            </el-table-column>
            <el-table-column
              prop="registerTime"
              label="注册时间">
              <template slot-scope="scope">
                <span v-if="scope.row.registerTime!=''"><span
                  class="skucost-pruice">{{ scope.row.registerTime | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="registerIp"
              label="注册IP">
            </el-table-column>
            <el-table-column
              prop="loginTime"
              label="最近登录时间">
              <template slot-scope="scope">
                <span v-if="scope.row.loginTime!=''"><span
                  class="skucost-pruice">{{ scope.row.loginTime  | formatDate('YYYY-MM-DD HH:mm:ss') }}</span></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="loginIp"
              label="最近登陆IP">
            </el-table-column>
            <el-table-column
              prop="paccount"
              label="组长账号">
            </el-table-column>
            <el-table-column
              prop="promoter"
              label="推广员账号">
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click.native="viewRole(scope.row)">查看角色</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-col>
    </el-row>
      <el-dialog title="查看角色" :visible.sync="dialogFormViewUser" @close="closeViewUser()"  customClass="customViewUser">
        <div v-if="showViewUser">
             <roleIndex :userId="userId"></roleIndex>
        </div>
      </el-dialog>
    <el-row>
      <el-col :span="24">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.currentPage"
          :page-sizes="[10,20, 50, 100, 200]"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total">
        </el-pagination>
      </el-col>
    </el-row>

  </basic-container>
  </div>
</template>

<style>
.input-with-select .el-input-group__prepend {
  background-color: #fff;
  width: 100px;
}
</style>


<script>

import {getLeadList, getpromoterList} from "@/api/system/user";
import {getAccountList} from "@/api/system/details";
import {getToken} from "@/util/auth";
import {gameTypeList} from "@/api/game/game";
import {cloneObj, parseParam} from "@/util/util";
import VueElementLoading from 'vue-element-loading'
import {numberAccount} from "@/api/system/todaytotal";
import roleIndex from "@/views/role/index";
export default {
  data() {
    return {
      dialogFormViewUser:false,
      showViewUser:false,
      isActive: false,
      gameType:[],
      time: null,
      loading: true,
      leadlevel: 3,//组长等级
      level: 4,//推广员等级
      lead: {},
      number: {},
      page: {
        currentPage: 1,
        pageSize: 20,
        total: '',
      },
      userId:'',
      promoter: {},
      promoterDTO: {
        id: '',
        userPid: '',
        level: 4,
      },
      formInline: {
        typeId: '',
        userPid: '',
        promoterId: '',
        account: '',
        nowuser: false,
        startTime:'',
        endTime:'',
      },
      tableData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

    };

  },
  components: {
    roleIndex,
    VueElementLoading
  },
  computed: {

  },
  created() {
    // 设置时间为当天
    const today = new Date()
    today.setHours(0, 0, 0, 0)
    const endToday = new Date()
    endToday.setHours(23, 59, 59, 999)
    this.time = [today, endToday]
    
    this.nowload(this.leadlevel);
    this.onload();
    numberAccount().then(res=>{
      const data = res.data;
      this.number=data
    })
  },
  methods: {
    handleExport() {
      this.$confirm("是否导出注册明细数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var forming={};
        forming = cloneObj(this.formInline)
        if (this.isNotEmpty(this.time)) {
          forming.startTime = this.time[0].getTime()
          forming.endTime = this.time[1].getTime()
        }
        window.location.href = `/api/blade-details/account/export-account?blade-auth=${getToken()}&${parseParam(forming)}`
        this.formInline.startTime =''
        this.formInline.endTime =''
      });
    },
    viewRole(row) {
      // this.$router.push({name: '查看角色', path: '/role/index', query: {id: row.id}});
      this.showViewUser = false
      this.dialogFormViewUser = true
      this.showViewUser = true
      this.userId=row.id
    },
    closeViewUser(){
      this.showViewUser = false
      this.dialogFormViewUser = false
      this.userId=''
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page.pageSize = val;
      var startTime = undefined;
      var endTime = undefined;
      this.onload(startTime, endTime);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page.currentPage = val;
      var startTime = undefined;
      var endTime = undefined;
      this.onload(startTime, endTime);
    },
    nowload(level) {
      this.loading = true,
        getLeadList('', level).then(res => {
          const data = res.data.data;
          this.lead = data;
        });
      gameTypeList().then(res => {
        const data = res.data.data;
        this.gameType = data;
      });
      this.loading = false;
    },
    selectLead(value) {
      this.$set(this.formInline, 'promoterId', '')
      if (value == '') {
        this.promoter = {};
        return;
      }
      this.promoterDTO.userPid = value
      getpromoterList(this.promoterDTO).then(res => {
        const data = res.data.data;
        this.promoter = data;
      });
    },

    isNotEmpty(arr) {
      return arr != null && arr.length !== 0
    },
    isEmpty(arr) {
      return !this.isNotEmpty(arr)
    },

    onSubmit() {

      var startTime = undefined;
      var endTime = undefined;
      this.page.currentPage=1
      this.onload(startTime, endTime);
      numberAccount().then(res=>{
        const data = res.data;
        this.number=data
      })
    },
    onload(startTime, endTime) {
      if (this.isNotEmpty(this.time)) {
        startTime = this.time[0].getTime()
        endTime = this.time[1].getTime()
      }
      this.loading = true;
      this.isActive = true;
      getAccountList(this.page.currentPage, this.page.pageSize, Object.assign(this.formInline), startTime, endTime).then(res => {
        this.isActive = false;
        const data = res.data.data;
        console.log("res.data.data", res.data.data)
        this.page.total = data.total;
        this.tableData = data.records;
        this.loading = false;
      });
    }
  }
}

</script>

<style>
.customViewUser{
  width: 80%;
  background-color: #FFFFFF !important;
}
</style>
